import { reactive, onMounted, defineComponent, toRefs, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import requirementApi from '@/api/in/requirement-api'
import warehouseApi from '@/api/inwarehouse/warehouse-api'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import ZlrtSearch from '@/components/zlrt-search/search.vue'
import TableContext from '@/components/zlrt-table/table-context'

export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch
  },
  setup() {

    const ctx = reactive(new TableContext(getCurrentInstance(), {
      title: '材料清单',
      api: requirementApi,
      columns: [
        { prop: 'originalNo', label: '单号', valueType: 'input' },
        { prop: 'warehouseName', label: '仓库', valueType: 'slot' },
        { prop: 'project', label: '项目', valueType: 'input' },
        { prop: 'status', label: '状态', valueType: 'input' },
        { prop: 'operation', label: '操作', slot: true }
      ],
      rules: {
        originalNo: [{ required: true, message: '请输入单号', trigger: 'blur' }],
        warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
        project: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        status: [{ required: true, message: '请输入状态', trigger: 'blur' }]
      },
      other: {
        handleWarehouse(val) {
          const obj = data.warehouseOptions.find(item => {
            return item.id === val
          })
          ctx.editData.warehouseName = obj['name']
        }
      }
    }))

    const data = reactive({
      ctx,
      warehouseOptions: []
    })

    const getWarehouseList = async () => {
      const params = { current: 1, size: 500, filter: { disabled: false } }
      const res = await warehouseApi.list(params)
      data.warehouseOptions = res.data.records
    }

    // init
    onMounted(() => {
      getWarehouseList()
      ctx.loadData()
    })

    return {
      ...toRefs(data)
    }
  }
})
